<template>
  <view class="page">
    <view class="padding-top padding-lr">
      <view class="tip">
        请告诉我们您取消订单的原因，我们会努力为您提供更好的服务
      </view>
      <view class="margin-top">
        <view
          class="row-cancel"
          v-for="(item, index) of $data.list"
          :key="index"
          @tap="onCheck(item, index)"
        >
          <view class="row-cancel_left">{{ item.tip }}</view>
          <view class="row-cancel_right">
            <view
              class="row-cancel_right_box"
              :class="[{ 'row-cancel_right_box--active': item._check }]"
            >
              <view
                v-if="item._check"
                class="row-cancel_right_box--check"
              ></view>
            </view>
          </view>
        </view>
        <view class="padding-tb">
          <up-textarea
            v-model="$data.remark"
            placeholder="请输入其他原因..."
            count
            :height="130"
          ></up-textarea>
        </view>
      </view>
    </view>
    <view class="foot foot_box">
      <view class="btn btn_save" @tap="onSave"> 确定取消 </view>
    </view>
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick, computed } from "vue";
import { onLoad, onShow, onHide, onReady, onUnload } from "@dcloudio/uni-app";
import { cancelOrder, getOrderDetail } from "../../../../api/Interface/order";
import errorCode from "../../../../utils/http/errorCode";
import BasicConfig from "../../../../utils/config";
import { getConfig } from "../../../../api/Interface/app";
import { useGetConfig } from "../../../../hooks/useCommon";
import { configKeyEnum } from "../../../../enums/common";
import { useSubscribeTemplate } from "../../../../hooks/useSubscribe";
import { subscribeEnum } from "../../../../enums/subscribe";
const $data = reactive({
  localNo: "",
  orderServiceId: "",
  list: [],
  remark: "",
});
const init = () => {
  useGetConfig({ key: configKeyEnum["订单取消原因"] }).then((res) => {
    $data.list = res;
    $data.list.push({
      key: "other",
      tip: "其他（必填）",
      value: "其他（必填）",
    });
    $data.list.map((m) => (m._check = false));
  });
};
const onCheck = (item, index) => {
  $data.list.map((m, i) => (m._check = i === index));
};
const onSave = () => {
  const opt = $data.list.find((l) => l._check);
  if (!opt) {
    BasicConfig.toast("请选择取消原因");
    return;
  }
  if (opt.key === "other" && !$data.remark) {
    BasicConfig.toast("请输入其他原因");
    return;
  }
  const cancelReason = opt.key === "other" ? $data.remark : opt.value;
  uni.showModal({
    content: "确定取消订单?",
    confirmColor: BasicConfig.MainColor,
    success: (success) => {
      if (success.confirm) {
        cancelOrder({
          localNo: $data.localNo,
          cancelReason,
        }).then((res) => {
          BasicConfig.toast(res.msg);
          if (res.code === errorCode.success) {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1000);
          }

          // if (res.code === errorCode.success) {
          //   useSubscribeTemplate([subscribeEnum.service.orderCancel]).then(
          //     (res) => {
          //       if (res.code === errorCode.success) {
          //         setTimeout(() => {
          //           uni.navigateBack({
          //             delta: 1,
          //           });
          //         }, 1000);
          //       }
          //     }
          //   );
          // }
        });
      }
    },
  });
};
onLoad((options) => {
  $data.localNo = options.localNo;
  $data.orderServiceId = options.orderServiceId;
  init();
});
onUnload(() => {});
onReady(() => {});
</script>

<style lang="scss" scoped>
.page {
  background: #ffffff;
  width: 100vw;
  min-height: 100vh;
  color: #333333;
  font-size: 34rpx;
  padding-bottom: 300rpx;
  .tip {
    color: #999999;
    font-size: 30rpx;
  }
  .row-cancel {
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
    }
    &_left {
      width: calc(100% - 120rpx);
    }
    &_right {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      &_box {
        width: 50%;
        height: 50%;
        border: 1px solid #cccccc;
        background: #cccccc;
        position: relative;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &--check {
          width: 70%;
          height: 70%;
          border-radius: 100%;
          background-color: $main-color;
        }
      }
      &_box--active {
        background: rgba($color: #ffffff, $alpha: 0);
        border-color: $main-color;
      }
    }
  }
  ::v-deep .u-textarea {
    background-color: #f2f6f9;
    border-radius: 20rpx;
  }
  ::v-deep .u-textarea__count {
    background-color: #f2f6f9 !important;
  }

  .foot_box {
    padding: 30rpx;
    z-index: 9;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      flex: 1;
      border-radius: 100rpx;
      text-align: center;
      font-size: 34rpx;
      padding: 30rpx;
      &:not(:first-child) {
        margin-left: 30rpx;
      }
    }
    .btn_save {
      background: $main-color;
      color: #ffffff;
    }
  }
}
</style>
